:host {
  display: flex;
  flex-direction: var(--cx-flex-direction, column);

  --cx-border-color: var(--cx-g-color-light);
  --cx-border-width: 0.1vw;

  height: 100%;
  > cx-picture {
    height: 100%;
    width: 100%; // required to support horizontal layouts
    position: relative;
  }
}

.thumbs {
  display: flex;
  justify-content: flex-start;

  cx-picture {
    width: var(--cx-width, 6vmax);
    height: var(--cx-width, 6vmax);
    transition: all var(--cx-g-transition-duration);

    &:not(.active) {
      cursor: pointer;
    }
    overflow: hidden;
    position: relative;

    border: var(--cx-border-width) var(--cx-border-color) var(--cx-border-style);

    margin: var(--cx-margin, 0.5vw);
    padding: var(--cx-padding, 0.5vw);

    &:hover,
    &.active {
      border-color: var(--cx-border-color, var(--cx-g-color-primary));
    }
  }
}
